<template>
  <div class="innerBox">
    <span>{{ company }}</span>
    <a-space>
      <a-select
        v-model:value="state.method"
        size="small"
        :dropdownMatchSelectWidth="false"
      >
        <a-select-option value="0">实物量</a-select-option>
        <a-select-option value="1">碳排放量</a-select-option>
      </a-select>
      <a-select
        v-model:value="state.category"
        :options="state.options"
        :dropdownMatchSelectWidth="false"
        size="small"
      >
      </a-select>
      <a-radio-group size="small" v-model:value="state.dateType">
        <a-radio-button value="month">月度</a-radio-button>
        <a-radio-button value="quarter">季度</a-radio-button>
        <a-radio-button value="year">年度</a-radio-button>
        <a-radio-button value="other">范围</a-radio-button>
      </a-radio-group>
      <a-range-picker
        v-if="state.dateType === 'other'"
        format="YYYY-MM"
        v-model:value="state.monthRange"
        picker="month"
        size="small"
      />
    </a-space>
  </div>
</template>
<script setup>
import { watch, reactive, watchEffect, computed } from "vue";
import _ from "lodash";
import { categorys, companys } from "@/utils/source";
import dayjs from "dayjs";

const state = reactive({
  dateType: "month",
  options: [],
  method: "0",
  category: null,
  monthRange: [],
});

const props = defineProps(["company", "type"]);
const emits = defineEmits(["onSubmit"]);

const _categorys = _.map(categorys, (v) => v);

watch(
  () => [props.type, props.company, state.method],
  ([type, company, method]) => {
    let opts = [];
    if (type === 1) {
      opts = _.map(_categorys.slice(0, 5), (o, i) => ({
        label: o,
        value: o,
        key: i,
      }));
    } else if (type === 2) {
      opts = _.map(_categorys.slice(5), (o, i) => ({
        label: o,
        value: o,
        key: i,
      }));
      // 招商重工在政府核查里没有某些能源分类
      if (company === companys["2"]) {
        opts = _.filter(
          opts,
          (o) =>
            ![categorys[11], categorys[12], categorys[13]].includes(o.value)
        );
      }
    }
    if (method === "1") {
      // 碳排放量需要增加一个选项
      opts.push({
        label: "碳排总量",
        value: "碳排总量",
        key: opts.length,
      });
    }
    state.options = opts;

    if (state.options.length) {
      state.category = state.options[0].value;
    }
  },
  { immediate: true }
);

watch(
  () => state.dateType,
  (v) => {
    if (v === "other") {
      state.monthRange = [dayjs().startOf("year"), dayjs()];
    } else {
      state.monthRange = [];
    }
  }
);

const submit = () => {
  let start, end;
  if (state.monthRange.length) {
    start = state.monthRange[0];
    end = state.monthRange[1];
  }
  emits("onSubmit", {
    company: props.company,
    category: state.category,
    type: props.type,
    method: state.method,
    dateType: state.dateType,
    start,
    end,
  });
};

const watchValue = computed(() => {
  let start, end;
  if (state.monthRange.length) {
    start = state.monthRange[0].format("YYYY-MM");
    end = state.monthRange[1].format("YYYY-MM");
  }
  return `${state.dateType}-${state.method}-${state.category}-${start}-${end}`;
});

watch(watchValue, (v) => {
  submit();
});

defineExpose({ submit });
</script>
<style lang="less" scoped>
.innerBox {
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1em;

  :deep(.ant-picker-input) {
    width: 70px;
  }
}
</style>
